@import "@/style/imports";

.page-distribution-qrcode {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  /*  #ifdef  h5  */
  box-sizing: border-box;
  padding-top: $navigate-height-h5;
  /*  #endif  */
  .qrcode-bg {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 88%;
    height: 80%;
    background: #fff;
    border-radius: 10px;
  }
  .title {
    position: relative;
    font-size: 46px;
    margin-bottom: 20px;
    &::before {
      position: absolute;
      top: 50%;
      right: 150%;
      width: 100px;
      height: 1px;
      background: rgba(255, 255, 255, 0.3);
      content: "";
    }
    &::after {
      position: absolute;
      top: 50%;
      left: 150%;
      width: 100px;
      height: 1px;
      background: rgba(255, 255, 255, 0.3);
      content: "";
    }
  }
  .avatar {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin-bottom: 10px;
  }
  .name {
    font-size: 32px;
    margin-bottom: 100px;
  }
  .welcome-words {
    font-size: 36px;
    margin-bottom: 50px;
  }
  .qrcode {
    width: 250px;
    height: 250px;
    padding: 20px;
    margin-bottom: 20px;
    background: #fff;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .tips {
    font-size: 26px;
  }
}
